$(function(){
    // 选择裁剪的图片
    const $img = $('.upload-image')

    const hang = {
        aspectRatio: 1, // 设置裁剪比例
        preview: '.pre1, .pre2'
    }
    // 创建裁剪
    $img.cropper(hang)

    // 选择文件 弹窗
    $('#select-file').on('click',function(){
        $('#file').click()
    })

    //监听 选择裁剪的图片
    $('#file').on('change',function(){
        // 选择文件
        const file = this.files[0]
        // 把文件转为Blob类型的url地址
        const URL = window.URL.createObjectURL(file)
        // 上传图片
        $img
        .cropper('destroy')//销毁裁剪啊
        .attr('src',URL) //换图片
        .cropper(hang) //重新开启裁剪
    })

    // 上传头像
    $('.layui-btn-danger').on('click',function(){
        if($('#file')[0].length <= 0){
            return layui.layer.msg('请选择文件')
        }
        // 获取裁剪后的图片
        const url = $img.cropper('getCroppedCanvas',{
            width: 100,
            height: 100
        }).toDataURL('image/png')

        $.post('/my/update/avatar',{
            avatar:url
        }).then(res =>{
            console.log(res);
            if(res.status != 1){
                return layui.layer.msg('更新头像失败')
            }
            layui.layer.msg('更新头像成功')

            // 获取父级 用户信息
            parent.hang()
        })
    })
})